<template>
  <div style="width: 100%;height: 91vh">
    <!--头部-->
    <van-nav-bar
        title="MBTI测试"
    />
    <!--logo-->
    <div class="img_logo">
      <van-image
          width="65"
          height="65"
          src="https://s1.ax1x.com/2022/11/06/xXTBVO.png"
      />
    </div>

    <div style="margin-bottom: 15px" class="mbtiInfo">
      <span v-show="user.personalityName">人格：<van-tag type="primary">{{ user.personalityName }}</van-tag></span>
      <span v-show="!user.personalityName">你还没有测试，赶快测试吧！</span>
    </div>
    <!--人格描述-->
    <div class="perDes" v-show="user.personalityName">
      <div class="desInfo">
        {{ user.personalityDescription }}
      </div>
      <div class="desText" @click="moreBtn">..更多</div>
    </div>

    <!--判断是否需要进行第二次测试-->
    <div v-if="user.personalityName">
      <van-row gutter="50" type="flex" justify="center">
        <van-col span="9">
          <router-link to="/mbti/question">
            <van-button type="primary" @click="beginTestBtn">重新测试</van-button>
          </router-link>
        </van-col>
        <van-col>
          <router-link to="/recMajor">
            <van-button type="primary">推荐结果</van-button>
          </router-link>
        </van-col>
      </van-row>
    </div>
    <div v-else>
      <van-row type="flex" justify="center">
        <van-col>
          <router-link to="/mbti/question">
            <van-button type="info" @click="beginTestBtn">开始测试</van-button>
          </router-link>
        </van-col>
      </van-row>
    </div>

    <!--分割线--测试中-->
    <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
        v-show="showDivider"
    >
      测试中
    </van-divider>

    <!--测试题-->
    <router-view v-if="showDivider"/>

    <!--切换题目-->
    <div v-show="showDivider" style="margin-top: 25px;">
      <van-row type="flex" justify="space-around">
        <!--        <van-col>-->
        <!--          <van-button color="#FF8C00" @click="lastQ">上一题</van-button>-->
        <!--        </van-col>-->
        <van-col>
          <van-button type="info" @click="nextQ">下一题</van-button>
        </van-col>
      </van-row>
    </div>

    <!--底部-->
    <Footer/>
  </div>
</template>

<script>
import Footer from "@/components/Footer";
import MbtiQuestion from "@/views/MbtiQuestion";
import {Dialog, Toast} from "vant";

export default {
  name: "Mbti",
  components: {MbtiQuestion, Footer},
  data() {
    return {
      user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {},
      showDivider: false,
      count: 0,
      // mbtiCode:'',
      mbtiTest: [],
      // mbtiTest: [
      //   {
      //     "q": "计划一个旅程时候，你喜欢",
      //     "a": "大部分时间跟当天感觉行事",
      //     "b": "事先知道大部分日子做什么",
      //     "ia": "kCjk",
      //     "ib": "l7m3"
      //   },
      //   {
      //     "q": "你认为按照程序做事",
      //     "a": "有时需要，但一般不大喜欢这样的",
      //     "b": "大多数是有帮助而且喜欢做的",
      //     "ia": "aObA",
      //     "ib": "pBqJ"
      //   },
      //   {
      //     "q": "你通常喜欢",
      //     "a": "事先安排你的社交约会",
      //     "b": "随兴之所至做事 ",
      //     "ia": "XYZ6",
      //     "ib": "ScTu"
      //   },
      //   {
      //     "q": "下面每一对词语中，哪个词语更合你心意",
      //     "a": "声明",
      //     "b": "概念",
      //     "ia": "fXeG",
      //     "ib": "qKpC"
      //   },
      // ],


    }
  },
  methods: {

    //更多按钮
    moreBtn() {
      Dialog.alert({
        title: '描述',
        message: this.user.personalityDescription,
      }).then(() => {
        // on close
      });
    },

    //上一题按钮
    // lastQ() {
    //   if (this.count === 0) {
    //     Dialog.alert({
    //       message: '已经是第一题！'
    //     }).then(() => {
    //     })
    //     return
    //   }
    //   this.count -= 1
    //   this.$store.dispatch('mbtiTest', this.mbtiTest[this.count])
    // },

    //下一题按钮
    nextQ() {
      const radio = this.$store.state.radioBtn
      if (radio === this.count) {
        Toast({
          duration: 800,
          type: 'fail',
          message: '请选择选项'
        });
        return
      }
      if (this.count === this.mbtiTest.length - 1) {
        Dialog.confirm({
          message: '确认提交吗',
        }).then(() => {
          // 提交结果到api获取人格数据
          this.$http.get('/juhea', {
            params: {
              answers: this.$store.getters.finalAnswers,
              key: '56a9c4c30e034b1b54e835c4ef00d7a6'
            }
          }).then(res => {
            if (res.data.reason === 'success') {
              console.log('要发送请求了', res.data.result.alphabet)
              this.user.personalityCode = res.data.result.alphabet
              console.log('@@@', this.user)
              //发送请求到后端保存该用户的人格测试数据
              // this.user.personalityCode = 'INTJ'
              this.request.put('/api/user/addUserPersonality', this.user).then(res => {
                if (res.code === 1) {
                  console.log(res.data)
                  localStorage.setItem('user', JSON.stringify(res.data))
                  //弹框 完成测试，跳转推荐页面
                  Dialog.alert({
                    message: '恭喜完成测试，点击确认跳转推荐页',
                  }).then(() => {
                    console.log('点击了确认')
                    //点击确定之后，跳转推荐的页面
                    this.$router.push('/recMajor')
                  });
                }
              })
            }
          })
        }).catch(() => {
          // on cancel
        });
        return
      }
      this.count += 1
      this.$store.dispatch('mbtiTest', this.mbtiTest[this.count])
    },
    //开始测试按钮
    beginTestBtn() {
      //先进行能否测试判断
      const expectDepartmentId = this.user.expectDepartmentId
      const majorId = this.user.majorId
      const regionId = this.user.regionId
      const school = this.user.school
      if (expectDepartmentId && majorId && regionId && school) {
        //让state中的answers为空
        this.$store.dispatch('setAnswersNull', '')
        this.showDivider = true
      } else {
        Toast({
          type: 'fail',
          message: '请先完善个人信息',
          duration: 800
        })
        return
      }
    }
  },
  created() {
    //获取性格测试题目
    this.$http.get('/juheq', {
      params: {
        level: 'senior',
        key: '56a9c4c30e034b1b54e835c4ef00d7a6'
      }
    }).then(res => {
      if (res.status === 200) {
        this.mbtiTest = res.data.result
        this.$store.dispatch('mbtiTest', this.mbtiTest[0])
        this.$store.commit('RADIOBTNNULL', 0)
      }
    })
    // this.$store.dispatch('mbtiTest', this.mbtiTest[0])
    // this.$store.commit('RADIOBTNNULL',0)
  },
}
</script>

<style lang="less" scoped>
.perDes {
  .desInfo {
    width: 80%;
    height: 20px;
    overflow: hidden;
    margin-bottom: 15px;
  }

  .desText {
    color: blue;
  }

  display: flex;
}

.mbtiInfo {
  margin-left: 28%;
}

.img_logo {
  width: 65px;
  height: 65px;
  margin: 20px auto;
}
</style>